<template>
	<u-popup :show="show" mode="bottom" :popup="false" :mask="true" :closeable="true" :safe-area-inset-bottom="true" close-icon-color="#ffffff" :maskCloseAble="true" @close="show=false">
		<u-tabs v-if="show" :list="filter.tabs(tabs)" :is-scroll="true" :current="index" @change="i=>index=i" ref="tabs" active-color="#00b280"></u-tabs>
		<view v-if="show" class="fjs h">
			<scroll-view :scroll-y="true" class="ht f1">
				<view class="p6" :class="{'fc-primary':picker[0]===i}" v-for="(item,i) in range[0]" :index="i" :key="i" @click="change(i, 0)">
					{{item[0]}}
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="ht f1" v-if="level>1 && !['11','12','31','50','81','82'].includes(picker[0])">
				<view class="p6" :class="{'fc-primary':picker[1]===i}" v-for="(item,i) in range[1]" :index="i" :key="i" @click="change(i, 1)">
					<text v-if="item[0]">{{item[0]}}</text>
				</view>
			</scroll-view>
			<scroll-view :scroll-y="true" class="ht f1" v-if="level>2">
				<view class="p6" :class="{'fc-primary':picker[2]===i}" v-for="(item,i) in range[2]" :index="i" :key="i" @click="change(i, 2)">
					<text v-if="item[0]">{{item[0]}}</text>
				</view>
			</scroll-view>
		</view>
		<view><button v-if="index>=level-1" type="primary" @click="confirm">确定</button></view>
	</u-popup>
</template>

<script>
import filter from '@/utils/filter'
import {mapState} from 'pinia'
import {cacheStore} from '@/store'
/**
 *  
 */
export default {
	props: {
		value: {
			type: [String, Number],
			default: ''
		},
		// 是否允许通过点击遮罩关闭Picker
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		level: {
			type: Number,
			default: 3
		}
	},
	data () {
		return {
			filter: filter,
			picker: ['00', '00', '00'],
			index: 0,
			show: false
		}
	},
	computed: {
		...mapState(cacheStore, ['regions']),
		range(){
			const range = [this.regions]
			if(this.level>1){
				if(this.picker[0]>0){
					range[1] = this.regions[this.picker[0]][1]
					if(['11','12','31','50'].includes(this.picker[0])){
						this.picker[1] = '01'
					}
				} else {
					range[1] = []
				}
			}
			if(this.level>2){
				if(this.picker[0]>0&&this.regions[this.picker[0]][1][this.picker[1]]){
					range[2] = this.regions[this.picker[0]][1][this.picker[1]][1]
				} else {
					range[2] = []
				}
			}
			return range
		},
		tabs() {
			const tabs = []
			tabs[0] = this.picker[0]>0 ? this.range[0][this.picker[0]][0] : "请选择"
			if (this.level>1 && this.picker[0]>0 && !['11','12','31','50','81','82'].includes(this.picker[0])) {
				tabs[1] = this.picker[1]>0 ? this.range[1][this.picker[1]][0] : "请选择"
			}
			if (this.level>2 && this.picker[0]>0 && this.picker[1]>0) {
				tabs[2] = this.picker[2]>0 ? this.range[2][this.picker[2]][0] : '请选择'
			}
			return tabs
		}
	},
	methods: {
		change(i, level) {
			if(this.picker[level] == i){
				return
			}
			this.index = level
			this.$set(this.picker, level, i)
			if(level < this.level - 1){
				this.picker.map((r,k)=>{
					k>level && this.$set(this.picker, k, '00')
				})
			}
			if(this.level == 2 && ['11','12','31','50','81','82'].includes(this.picker[0])){
				level += 1
			}
		},
		confirm(){
				this.show = false
				this.$emit('update:value', parseInt(this.picker.join('')))
				this.$emit('confirm', this.picker.join(''))
		}
	},
	watch: {
		value(newVal){
			if(newVal === 0 && newVal > 100000 && newVal < 999999){
				this.picker = String(newVal).match(/\d{2}/g)
			}
		}
	}
}
</script>
<style scoped lang="scss">
.h { height: 800rpx; }
</style>
